<template>
	<view class="wrap">
		<view class="wrap-list">
			<view class="wrap-list-info">
				<view class="wrap-list-info-content align-center">
					<view class="wrap-list-info-content-atv">
						<up-image src="/static/images/agreeBg.png" :fade="false" width="120rpx" height="120rpx"
							radius="12rpx"></up-image>
					</view>
					<view class="wrap-list-info-content-name">
						<view class="wrap-list-info-title">
							昵称
						</view>
						<view class="wrap-list-info-content-name-name">
							聂小倩
						</view>
					</view>
				</view>
			</view>
			<view class="wrap-list-appointment">
				<view class="wrap-list-appointment-time align-justify-space-between">
					预约时间
					<view class="wrap-list-appointment-time-info align-center">
						4月15日—10:00:00
						<up-icon name="arrow-right"></up-icon>
					</view>
				</view>
				<view class="wrap-list-appointment-address">
					预约地点
					<view class="wrap-list-appointment-address-input">
						<up-textarea style="width: 100%;background-color: #F1F1F1;" height="340rpx"
							v-model="appointmentAddress" placeholder="请填写预约地点"></up-textarea>
					</view>
				</view>
			</view>
			<view class="wrap-list-needAccompany">
				<up-checkbox label="需要管家陪同，抄送至管家" shape="circle" size="26rpx" iconSize="26rpx" labelSize="30rpx" labelColor="#444444" activeColor="#FF47AB"></up-checkbox>
			</view>
			<view class="wrap-list-btn">
				发送
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		useUserStore
	} from '@/store'
	import {
		ref,
		computed,
		getCurrentInstance
	} from "vue"

	const appointmentAddress = ref("")
	const checkboxValue = ref([])
</script>

<style lang="scss" scoped>
	.wrap {
		padding: 30rpx;
		box-sizing: border-box;

		&-list {
			padding: 40rpx;
			box-sizing: border-box;
			background-color: #fff;
			border-radius: 12rpx 12rpx 12rpx 12rpx;

			&-info {
				height: 160rpx;
				border-bottom: 2rpx solid #DEDEDE;

				&-content {
					&-name {
						margin-left: 16rpx;

						&-title {
							margin-bottom: 20rpx;
							font-size: 30rpx;
							color: #444444;
						}

						&-name {
							font-weight: bold;
							font-size: 34rpx;
							color: #222222;
						}
					}
				}
			}

			&-appointment {
				padding: 70rpx 0 40rpx;
				box-sizing: border-box;
				border-bottom: 2rpx solid #DEDEDE;

				&-time-info {
					justify-content: flex-end;
				}

				&>view {
					align-items: flex-start;
					font-size: 30rpx;
					color: #444444;

					&:first-child {
						margin-bottom: 60rpx;

						&>view {
							width: 350rpx;
							font-size: 30rpx;
							color: #222222;
						}
					}
				}

				&-address-input {
					width: 100%;
					margin-top: 30rpx;
				}
			}

			&-needAccompany {
				margin: 30rpx 0 60rpx;
				font-size: 30rpx;
				color: #444444;
			}

			&-btn {
				height: 96rpx;
				border-radius: 200rpx;
				box-sizing: border-box;
				font-size: 30rpx;
				color: #FFFFFF;
				line-height: 96rpx;
				text-align: center;
				background-color: #FF47AB;
			}
		}
	}
</style>